/* Gridicon Floaties */
@keyframes floating {
	0% {
		opacity: 0;
		transform: scale( 0.8 ) translateY( 0 ) translateX( 0 ) rotate( 0 );
	}
	70% {
		opacity: 1;
		transform: scale( 1 ) translateY( 30px ) translateX( 30px ) rotate( -20deg );
	}
	100% {
		opacity: 0;
		transform: scale( 0.8 ) translateY( 0 ) translateX( 0 ) rotate( 0 );
	}
}

@keyframes focus {
	0%,
	100% {
		opacity: 0.1;
		filter: blur( 1px );
	}
	70% {
		opacity: 0.2;
		filter: blur( 4px );
	}
}

.signup-processing-screen__floaties {
	pointer-events: none;
	position: fixed;
	top: 40px;
	right: 0;
	bottom: 0;
	max-height: calc( 100vw - 30px );
	opacity: 0.1;
	animation: focus 5s infinite ease-in-out;

	@include breakpoint-deprecated( '>660px' ) {
		left: 0;
	}

	@include breakpoint-deprecated( '<660px' ) {
		transform: scale( 0.8 );
		left: 130px;
		top: -120px;
	}

	@include breakpoint-deprecated( '>960px' ) {
		transform: scale( 1.2 );
	}

	@include breakpoint-deprecated( '>1040px' ) {
		transform: scale( 1.5 );
	}

	.gridicon {
		fill: var( --color-text-inverted );
		position: absolute;
		height: auto;
		width: auto;
		opacity: 0;
		transform: scale( 0.8 );
		animation: floating 10s infinite ease-in-out;
	}
	.gridicons-add {
		top: 0;
		left: calc( 50% - 320px );
		height: 150px;
		width: 150px;
	}
	.gridicons-aside {
		top: 150px;
		left: calc( 50% + 310px );
		height: 70px;
		width: 70px;
		animation-delay: 6s;
	}
	.gridicons-attachment {
		height: 60px;
		width: 60px;
		top: 70px;
		left: calc( 50% + 220px );
		animation-delay: 7s;
	}
	.gridicons-audio {
		height: 80px;
		width: 80px;
		top: 170px;
		left: calc( 50% - 220px );
		transform: rotate( -30deg );
		animation-delay: 6s;
	}
	.gridicons-bell {
		height: 120px;
		width: 120px;
		top: 10px;
		left: calc( 50% + 290px );
		animation-delay: 10s;
	}
	.gridicons-book {
		top: 340px;
		left: calc( 50% - 300px );
		height: 100px;
		width: 100px;
		animation-delay: 1s;
	}
	.gridicons-camera {
		top: 300px;
		left: calc( 50% + 200px );
		height: 160px;
		width: 160px;
		transform: rotate( -10deg );
		animation-delay: 3s;
	}
	.gridicons-comment {
		left: calc( 50% + 130px );
		top: 167px;
		height: 140px;
		width: 140px;
		transform: rotate( 12deg );
	}
	.gridicons-globe {
		height: 100px;
		width: 100px;
		top: 220px;
		left: calc( 50% - 330px );
		animation-delay: 3s;
	}
	.gridicons-pencil {
		height: 220px;
		width: 220px;
		top: -110px;
		left: calc( 50% + 110px );
		animation-delay: 1s;
	}
	.gridicons-phone {
		height: 80px;
		width: 80px;
		top: 130px;
		left: calc( 50% - 390px );
		animation-delay: 6s;
	}
	.gridicons-reader {
		height: 130px;
		width: 130px;
		top: 360px;
		left: calc( 50% - 170px );
		transform: rotate( 12deg );
		animation-delay: 8s;
	}
	.gridicons-star {
		height: 90px;
		width: 90px;
		top: 380px;
		left: calc( 50% + 60px );
	}
	.gridicons-video {
		top: 245px;
		left: calc( 50% - 160px );
		animation-delay: 3s;
	}
	.gridicons-align-image-right {
		top: 280px;
		left: calc( 50% + 90px );
		animation-delay: 7s;
	}
	.gridicons-bookmark {
		top: 460px;
		height: 110px;
		width: 110px;
		left: calc( 50% - 440px );
		animation-delay: 5s;
	}
	.gridicons-briefcase {
		top: 320px;
		height: 80px;
		width: 80px;
		left: calc( 50% - 450px );
		animation-delay: 1s;
	}
	.gridicons-calendar {
		top: 460px;
		left: calc( 50% + 300px );
		height: 80px;
		width: 80px;
		animation-delay: 2s;
	}
	.gridicons-clipboard {
		top: 240px;
		left: calc( 50% + 290px );
		height: 50px;
		animation-delay: 6s;
	}
	.gridicons-cloud-upload {
		top: 180px;
		left: calc( 50% - 280px );
		height: 40px;
		width: 40px;
		animation-delay: 5s;
	}
	.gridicons-cog {
		top: 110px;
		left: calc( 50% + 160px );
		height: 40px;
		width: 40px;
		animation-delay: 1s;
	}
	.gridicons-customize {
		top: 240px;
		height: 40px;
		width: 40px;
		left: calc( 50% - 400px );
		animation-delay: 1s;
	}
	.gridicons-help {
		top: 460px;
		left: calc( 50% + 160px );
		height: 90px;
		width: 90px;
		animation-delay: 1s;
	}
	.gridicons-link {
		top: 60px;
		left: calc( 50% - 160px );
		height: 50px;
		width: 50px;
		transform: rotate( -45deg );
		animation-delay: 5s;
	}
	.gridicons-lock {
		top: 60px;
		left: calc( 50% - 400px );
		height: 50px;
		width: 50px;
		animation-delay: 6s;
	}
	.gridicons-pages {
		top: 70px;
		left: calc( 50% + 70px );
		height: 50px;
		width: 50px;
		animation-delay: 8s;
	}
	.gridicons-share {
		top: 280px;
		left: calc( 50% + 360px );
		animation-delay: 2s;
	}
	.gridicons-stats {
		top: 470px;
		left: calc( 50% - 270px );
		height: 80px;
		width: 80px;
		animation-delay: 9s;
	}
}

.signup-processing-screen__content {
	position: relative;
	z-index: 1;
	max-width: 500px;
	margin: 0 auto;
	padding-bottom: 30px;
	color: var( --color-text-inverted );
}

/* Title */
@keyframes fade-in {
	0% {
		transform: translateY( 0 );
		opacity: 0;
	}
	100% {
		transform: translateY( -80px );
		opacity: 1;
	}
}

.signup-processing-screen__title {
	margin: 360px 0 0;
	padding: 0 16px;
	text-align: center;
	animation: fade-in 0.8s 1 cubic-bezier( 0.075, 0.82, 0.165, 1 );
	animation-fill-mode: forwards;
}
